<template>
  <div class="dashboard-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>运营数据仪表板</h1>
      <p>FitMatch Pro 平台运营指标与盈利模式分析</p>
      <div class="date-selector">
        <select v-model="selectedPeriod" @change="updateData">
          <option value="7d">最近7天</option>
          <option value="30d">最近30天</option>
          <option value="90d">最近90天</option>
          <option value="1y">最近1年</option>
        </select>
      </div>
    </div>

    <!-- 核心指标卡片 -->
    <div class="metrics-grid">
      <div v-for="metric in coreMetrics" :key="metric.id" class="metric-card">
        <div class="metric-icon" :class="metric.iconClass">
          {{ metric.icon }}
        </div>
        <div class="metric-content">
          <h3>{{ metric.title }}</h3>
          <div class="metric-value">{{ metric.value }}</div>
          <div class="metric-change" :class="metric.trend">
            <span class="trend-icon">{{ metric.trend === 'up' ? '↗' : metric.trend === 'down' ? '↘' : '→' }}</span>
            <span>{{ metric.change }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="charts-section">
      <div class="chart-row">
        <!-- 用户增长趋势 -->
        <div class="chart-card">
          <div class="chart-header">
            <h3>用户增长趋势</h3>
            <div class="chart-legend">
              <span class="legend-item">
                <span class="legend-color user-color"></span>
                用户注册
              </span>
              <span class="legend-item">
                <span class="legend-color trainer-color"></span>
                私教入驻
              </span>
            </div>
          </div>
          <div class="chart-content">
            <div class="chart-placeholder">
              <svg viewBox="0 0 400 200" class="line-chart">
                <!-- 用户增长线 -->
                <polyline 
                  points="20,180 60,160 100,140 140,120 180,100 220,80 260,60 300,40 340,20 380,10"
                  fill="none" 
                  stroke="#3498db" 
                  stroke-width="3"/>
                <!-- 私教增长线 -->
                <polyline 
                  points="20,190 60,185 100,175 140,165 180,150 220,135 260,120 300,100 340,80 380,60"
                  fill="none" 
                  stroke="#e74c3c" 
                  stroke-width="3"/>
                <!-- 数据点 -->
                <circle cx="380" cy="10" r="4" fill="#3498db"/>
                <circle cx="380" cy="60" r="4" fill="#e74c3c"/>
              </svg>
            </div>
          </div>
        </div>

        <!-- 收入分析 -->
        <div class="chart-card">
          <div class="chart-header">
            <h3>收入构成分析</h3>
          </div>
          <div class="chart-content">
            <div class="revenue-breakdown">
              <div v-for="item in revenueBreakdown" :key="item.category" class="revenue-item">
                <div class="revenue-bar">
                  <div class="revenue-fill" 
                       :style="{ width: item.percentage + '%', backgroundColor: item.color }">
                  </div>
                </div>
                <div class="revenue-info">
                  <span class="revenue-category">{{ item.category }}</span>
                  <span class="revenue-amount">¥{{ item.amount.toLocaleString() }}</span>
                  <span class="revenue-percentage">{{ item.percentage }}%</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="chart-row">
        <!-- 用户活跃度 -->
        <div class="chart-card">
          <div class="chart-header">
            <h3>用户活跃度分析</h3>
          </div>
          <div class="chart-content">
            <div class="activity-heatmap">
              <div class="heatmap-header">
                <span>时间段</span>
                <span>周一</span>
                <span>周二</span>
                <span>周三</span>
                <span>周四</span>
                <span>周五</span>
                <span>周六</span>
                <span>周日</span>
              </div>
              <div v-for="hour in activityData" :key="hour.time" class="heatmap-row">
                <span class="time-label">{{ hour.time }}</span>
                <div v-for="(activity, index) in hour.days" :key="index" 
                     class="activity-cell" 
                     :class="getActivityLevel(activity)"
                     :title="`${hour.time} - ${activity}% 活跃度`">
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 地域分布 -->
        <div class="chart-card">
          <div class="chart-header">
            <h3>用户地域分布</h3>
          </div>
          <div class="chart-content">
            <div class="region-stats">
              <div v-for="region in regionData" :key="region.city" class="region-item">
                <div class="region-info">
                  <span class="city-name">{{ region.city }}</span>
                  <span class="user-count">{{ region.users }}人</span>
                </div>
                <div class="region-bar">
                  <div class="region-fill" :style="{ width: (region.users / maxUsers * 100) + '%' }"></div>
                </div>
                <span class="region-percentage">{{ ((region.users / totalUsers) * 100).toFixed(1) }}%</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 盈利模式展示 -->
    <div class="profit-model-section">
      <h2>盈利模式设计</h2>
      <div class="profit-models">
        <div v-for="model in profitModels" :key="model.id" class="profit-card">
          <div class="profit-header">
            <div class="profit-icon" :style="{ backgroundColor: model.color }">
              {{ model.icon }}
            </div>
            <h3>{{ model.title }}</h3>
          </div>
          <div class="profit-content">
            <p class="profit-description">{{ model.description }}</p>
            <div class="profit-details">
              <div class="profit-metric">
                <span class="metric-label">收入占比:</span>
                <span class="metric-value">{{ model.revenueShare }}%</span>
              </div>
              <div class="profit-metric">
                <span class="metric-label">月收入:</span>
                <span class="metric-value">¥{{ model.monthlyRevenue.toLocaleString() }}</span>
              </div>
              <div class="profit-metric">
                <span class="metric-label">增长率:</span>
                <span class="metric-value">{{ model.growthRate }}%</span>
              </div>
            </div>
            <div class="profit-features">
              <h4>核心特点:</h4>
              <ul>
                <li v-for="feature in model.features" :key="feature">{{ feature }}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 关键运营指标 -->
    <div class="kpi-section">
      <h2>关键运营指标 (KPI)</h2>
      <div class="kpi-grid">
        <div v-for="kpi in keyPerformanceIndicators" :key="kpi.id" class="kpi-card">
          <div class="kpi-header">
            <h4>{{ kpi.name }}</h4>
            <span class="kpi-category">{{ kpi.category }}</span>
          </div>
          <div class="kpi-value">
            <span class="current-value">{{ kpi.currentValue }}</span>
            <span class="target-value">目标: {{ kpi.targetValue }}</span>
          </div>
          <div class="kpi-progress">
            <div class="progress-bar">
              <div class="progress-fill" 
                   :style="{ width: kpi.progress + '%', backgroundColor: getProgressColor(kpi.progress) }">
              </div>
            </div>
            <span class="progress-text">{{ kpi.progress }}%</span>
          </div>
          <div class="kpi-description">
            {{ kpi.description }}
          </div>
        </div>
      </div>
    </div>

    <!-- 运营建议 -->
    <div class="recommendations-section">
      <h2>运营优化建议</h2>
      <div class="recommendations-grid">
        <div v-for="recommendation in recommendations" :key="recommendation.id" class="recommendation-card">
          <div class="recommendation-priority" :class="recommendation.priority">
            {{ getPriorityText(recommendation.priority) }}
          </div>
          <h4>{{ recommendation.title }}</h4>
          <p>{{ recommendation.description }}</p>
          <div class="recommendation-impact">
            <span class="impact-label">预期影响:</span>
            <span class="impact-value">{{ recommendation.expectedImpact }}</span>
          </div>
          <div class="recommendation-timeline">
            <span class="timeline-label">实施周期:</span>
            <span class="timeline-value">{{ recommendation.timeline }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DashboardView',
  data() {
    return {
      selectedPeriod: '30d',
      
      coreMetrics: [
        {
          id: 1,
          title: '总用户数',
          value: '12,456',
          change: '+8.2%',
          trend: 'up',
          icon: '👥',
          iconClass: 'users'
        },
        {
          id: 2,
          title: '活跃私教',
          value: '1,234',
          change: '+12.5%',
          trend: 'up',
          icon: '💪',
          iconClass: 'trainers'
        },
        {
          id: 3,
          title: '月度收入',
          value: '¥2,345,678',
          change: '+15.3%',
          trend: 'up',
          icon: '💰',
          iconClass: 'revenue'
        },
        {
          id: 4,
          title: '课程完成率',
          value: '87.6%',
          change: '+2.1%',
          trend: 'up',
          icon: '✅',
          iconClass: 'completion'
        },
        {
          id: 5,
          title: '用户留存率',
          value: '73.2%',
          change: '-1.8%',
          trend: 'down',
          icon: '🔄',
          iconClass: 'retention'
        },
        {
          id: 6,
          title: '平均客单价',
          value: '¥1,280',
          change: '+5.7%',
          trend: 'up',
          icon: '💳',
          iconClass: 'price'
        }
      ],
      
      revenueBreakdown: [
        { category: '课程佣金', amount: 1200000, percentage: 51, color: '#3498db' },
        { category: '会员费', amount: 600000, percentage: 26, color: '#e74c3c' },
        { category: '广告收入', amount: 300000, percentage: 13, color: '#f39c12' },
        { category: '增值服务', amount: 200000, percentage: 8, color: '#27ae60' },
        { category: '其他', amount: 45678, percentage: 2, color: '#9b59b6' }
      ],
      
      activityData: [
        { time: '06:00', days: [20, 25, 30, 28, 35, 45, 40] },
        { time: '09:00', days: [60, 65, 70, 68, 72, 80, 75] },
        { time: '12:00', days: [40, 45, 50, 48, 52, 60, 55] },
        { time: '15:00', days: [35, 40, 45, 43, 47, 55, 50] },
        { time: '18:00', days: [80, 85, 90, 88, 92, 95, 90] },
        { time: '21:00', days: [70, 75, 80, 78, 82, 85, 80] }
      ],
      
      regionData: [
        { city: '北京', users: 3200 },
        { city: '上海', users: 2800 },
        { city: '广州', users: 2100 },
        { city: '深圳', users: 1900 },
        { city: '杭州', users: 1200 },
        { city: '成都', users: 800 },
        { city: '武汉', users: 600 },
        { city: '西安', users: 400 }
      ],
      
      profitModels: [
        {
          id: 1,
          title: '课程佣金模式',
          description: '从每笔课程交易中收取5-15%的平台佣金，根据私教等级和课程类型差异化收费',
          revenueShare: 51,
          monthlyRevenue: 1200000,
          growthRate: 15.3,
          color: '#3498db',
          icon: '💼',
          features: [
            '差异化佣金比例（5%-15%）',
            '基于交易量的阶梯式收费',
            '优质私教享受更低佣金率',
            '新手私教前3个月免佣金'
          ]
        },
        {
          id: 2,
          title: '会员订阅模式',
          description: '提供月度/年度会员服务，享受课程折扣、优先预约、专属客服等增值服务',
          revenueShare: 26,
          monthlyRevenue: 600000,
          growthRate: 22.1,
          color: '#e74c3c',
          icon: '👑',
          features: [
            '月会员 ¥99/月，年会员 ¥999/年',
            '课程享受8-9折优惠',
            '优先预约热门时段',
            '专属客服和健身顾问'
          ]
        },
        {
          id: 3,
          title: '广告营销模式',
          description: '为健身器材、营养品牌、运动服装等相关企业提供精准广告投放服务',
          revenueShare: 13,
          monthlyRevenue: 300000,
          growthRate: 8.7,
          color: '#f39c12',
          icon: '📢',
          features: [
            '精准用户画像投放',
            'CPM/CPC/CPA多种计费模式',
            '品牌合作推广',
            '原生内容营销'
          ]
        },
        {
          id: 4,
          title: '增值服务模式',
          description: '提供体测分析、营养咨询、训练计划定制、线上课程等专业增值服务',
          revenueShare: 8,
          monthlyRevenue: 200000,
          growthRate: 35.2,
          color: '#27ae60',
          icon: '⚡',
          features: [
            '专业体测报告 ¥199',
            '个性化营养方案 ¥299',
            '线上直播课程',
            '健身装备租赁服务'
          ]
        }
      ],
      
      keyPerformanceIndicators: [
        {
          id: 1,
          name: '用户留存率',
          category: '用户指标',
          currentValue: '73.2%',
          targetValue: '80%',
          progress: 91.5,
          description: '30天内用户回访平台的比例，反映用户粘性和平台价值'
        },
        {
          id: 2,
          name: '私教活跃度',
          category: '供给指标',
          currentValue: '85.6%',
          targetValue: '90%',
          progress: 95.1,
          description: '月度内至少完成5节课程的私教占比'
        },
        {
          id: 3,
          name: '课程完成率',
          category: '服务质量',
          currentValue: '87.6%',
          targetValue: '92%',
          progress: 95.2,
          description: '用户成功完成预约课程的比例'
        },
        {
          id: 4,
          name: '平均响应时间',
          category: '服务效率',
          currentValue: '2.3小时',
          targetValue: '2小时',
          progress: 87.0,
          description: '私教回复用户咨询的平均时间'
        },
        {
          id: 5,
          name: '用户满意度',
          category: '服务质量',
          currentValue: '4.6/5.0',
          targetValue: '4.8/5.0',
          progress: 95.8,
          description: '基于课后评价的用户满意度评分'
        },
        {
          id: 6,
          name: '获客成本',
          category: '营销效率',
          currentValue: '¥156',
          targetValue: '¥120',
          progress: 76.9,
          description: '获得一个新用户的平均营销成本'
        }
      ],
      
      recommendations: [
        {
          id: 1,
          title: '优化私教匹配算法',
          description: '基于用户行为数据和偏好，改进智能匹配算法，提高首次匹配成功率',
          priority: 'high',
          expectedImpact: '提升15%用户留存率',
          timeline: '2-3个月'
        },
        {
          id: 2,
          title: '推出团体课程功能',
          description: '开发小团体训练功能，降低用户成本，提高私教收入效率',
          priority: 'medium',
          expectedImpact: '增加25%课程预约量',
          timeline: '3-4个月'
        },
        {
          id: 3,
          title: '建立私教培训体系',
          description: '建立标准化的私教培训和认证体系，提升服务质量和用户满意度',
          priority: 'high',
          expectedImpact: '提升20%用户满意度',
          timeline: '4-6个月'
        },
        {
          id: 4,
          title: '开发移动端APP',
          description: '开发原生移动应用，提供更好的用户体验和推送通知功能',
          priority: 'medium',
          expectedImpact: '提升30%用户活跃度',
          timeline: '5-6个月'
        }
      ]
    }
  },
  
  computed: {
    maxUsers() {
      return Math.max(...this.regionData.map(r => r.users));
    },
    
    totalUsers() {
      return this.regionData.reduce((sum, r) => sum + r.users, 0);
    }
  },
  
  methods: {
    updateData() {
      // 根据选择的时间段更新数据
      console.log('更新数据，时间段:', this.selectedPeriod);
    },
    
    getActivityLevel(activity) {
      if (activity >= 80) return 'high-activity';
      if (activity >= 60) return 'medium-activity';
      if (activity >= 40) return 'low-activity';
      return 'minimal-activity';
    },
    
    getProgressColor(progress) {
      if (progress >= 90) return '#27ae60';
      if (progress >= 70) return '#f39c12';
      return '#e74c3c';
    },
    
    getPriorityText(priority) {
      const priorityMap = {
        high: '高优先级',
        medium: '中优先级',
        low: '低优先级'
      };
      return priorityMap[priority] || priority;
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
}

.page-header h1 {
  color: #2c3e50;
  margin-bottom: 10px;
  font-size: 32px;
}

.page-header p {
  color: #7f8c8d;
  font-size: 16px;
  margin-bottom: 20px;
}

.date-selector {
  position: absolute;
  top: 0;
  right: 0;
}

.date-selector select {
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: white;
  font-size: 14px;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.metric-card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 20px;
  transition: all 0.3s ease;
}

.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.metric-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.metric-icon.users { background: linear-gradient(135deg, #667eea, #764ba2); }
.metric-icon.trainers { background: linear-gradient(135deg, #f093fb, #f5576c); }
.metric-icon.revenue { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.metric-icon.completion { background: linear-gradient(135deg, #43e97b, #38f9d7); }
.metric-icon.retention { background: linear-gradient(135deg, #fa709a, #fee140); }
.metric-icon.price { background: linear-gradient(135deg, #a8edea, #fed6e3); }

.metric-content {
  flex: 1;
}

.metric-content h3 {
  color: #7f8c8d;
  font-size: 14px;
  margin: 0 0 8px 0;
  font-weight: normal;
}

.metric-value {
  color: #2c3e50;
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 8px;
}

.metric-change {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: bold;
}

.metric-change.up { color: #27ae60; }
.metric-change.down { color: #e74c3c; }
.metric-change.stable { color: #7f8c8d; }

.charts-section {
  margin-bottom: 40px;
}

.chart-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.chart-card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart-header h3 {
  color: #2c3e50;
  margin: 0;
}

.chart-legend {
  display: flex;
  gap: 20px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.user-color { background: #3498db; }
.trainer-color { background: #e74c3c; }

.chart-content {
  height: 200px;
}

.chart-placeholder {
  width: 100%;
  height: 100%;
}

.line-chart {
  width: 100%;
  height: 100%;
}

.revenue-breakdown {
  display: flex;
  flex-direction: column;
  gap: 15px;
  height: 100%;
  justify-content: space-around;
}

.revenue-item {
  display: flex;
  align-items: center;
  gap: 15px;
}

.revenue-bar {
  flex: 1;
  height: 20px;
  background: #f8f9fa;
  border-radius: 10px;
  overflow: hidden;
}

.revenue-fill {
  height: 100%;
  border-radius: 10px;
  transition: width 0.3s ease;
}

.revenue-info {
  display: flex;
  flex-direction: column;
  min-width: 120px;
  font-size: 12px;
}

.revenue-category {
  font-weight: bold;
  color: #2c3e50;
}

.revenue-amount {
  color: #7f8c8d;
}

.revenue-percentage {
  color: #3498db;
  font-weight: bold;
}

.activity-heatmap {
  font-size: 12px;
}

.heatmap-header {
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 5px;
  font-weight: bold;
  color: #7f8c8d;
}

.heatmap-row {
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 2px;
}

.time-label {
  display: flex;
  align-items: center;
  color: #7f8c8d;
  font-size: 11px;
}

.activity-cell {
  height: 20px;
  border-radius: 2px;
  cursor: pointer;
}

.minimal-activity { background: #f8f9fa; }
.low-activity { background: #ffeaa7; }
.medium-activity { background: #fdcb6e; }
.high-activity { background: #e17055; }

.region-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.region-item {
  display: flex;
  align-items: center;
  gap: 15px;
}

.region-info {
  min-width: 80px;
  display: flex;
  flex-direction: column;
  font-size: 12px;
}

.city-name {
  font-weight: bold;
  color: #2c3e50;
}

.user-count {
  color: #7f8c8d;
}

.region-bar {
  flex: 1;
  height: 12px;
  background: #f8f9fa;
  border-radius: 6px;
  overflow: hidden;
}

.region-fill {
  height: 100%;
  background: linear-gradient(90deg, #3498db, #2980b9);
  border-radius: 6px;
  transition: width 0.3s ease;
}

.region-percentage {
  min-width: 40px;
  text-align: right;
  font-size: 12px;
  color: #7f8c8d;
}

.profit-model-section {
  margin-bottom: 40px;
}

.profit-model-section h2 {
  color: #2c3e50;
  text-align: center;
  margin-bottom: 30px;
}

.profit-models {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
}

.profit-card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.profit-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.profit-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.profit-icon {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
}

.profit-header h3 {
  color: #2c3e50;
  margin: 0;
}

.profit-description {
  color: #555;
  line-height: 1.6;
  margin-bottom: 20px;
}

.profit-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.profit-metric {
  text-align: center;
}

.metric-label {
  display: block;
  font-size: 12px;
  color: #7f8c8d;
  margin-bottom: 5px;
}

.metric-value {
  font-size: 16px;
  font-weight: bold;
  color: #2c3e50;
}

.profit-features h4 {
  color: #2c3e50;
  margin: 0 0 10px 0;
  font-size: 16px;
}

.profit-features ul {
  margin: 0;
  padding-left: 20px;
}

.profit-features li {
  color: #555;
  margin-bottom: 5px;
  line-height: 1.4;
}

.kpi-section {
  margin-bottom: 40px;
}

.kpi-section h2 {
  color: #2c3e50;
  text-align: center;
  margin-bottom: 30px;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.kpi-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.kpi-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.kpi-header h4 {
  color: #2c3e50;
  margin: 0;
}

.kpi-category {
  background: #e3f2fd;
  color: #1976d2;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.kpi-value {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.current-value {
  font-size: 24px;
  font-weight: bold;
  color: #2c3e50;
}

.target-value {
  font-size: 14px;
  color: #7f8c8d;
}

.kpi-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.progress-bar {
  flex: 1;
  height: 8px;
  background: #f8f9fa;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 14px;
  font-weight: bold;
  color: #2c3e50;
}

.kpi-description {
  color: #7f8c8d;
  font-size: 14px;
  line-height: 1.4;
}

.recommendations-section h2 {
  color: #2c3e50;
  text-align: center;
  margin-bottom: 30px;
}

.recommendations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
}

.recommendation-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
}

.recommendation-priority {
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.recommendation-priority.high {
  background: #ffebee;
  color: #c62828;
}

.recommendation-priority.medium {
  background: #fff3e0;
  color: #ef6c00;
}

.recommendation-priority.low {
  background: #e8f5e8;
  color: #2e7d32;
}

.recommendation-card h4 {
  color: #2c3e50;
  margin: 0 0 15px 0;
  padding-right: 80px;
}

.recommendation-card p {
  color: #555;
  line-height: 1.6;
  margin-bottom: 15px;
}

.recommendation-impact,
.recommendation-timeline {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
}

.impact-label,
.timeline-label {
  color: #7f8c8d;
}

.impact-value,
.timeline-value {
  color: #2c3e50;
  font-weight: bold;
}

@media (max-width: 768px) {
  .dashboard-container {
    padding: 15px;
  }
  
  .metrics-grid {
    grid-template-columns: 1fr;
  }
  
  .chart-row {
    grid-template-columns: 1fr;
  }
  
  .profit-models {
    grid-template-columns: 1fr;
  }
  
  .kpi-grid {
    grid-template-columns: 1fr;
  }
  
  .recommendations-grid {
    grid-template-columns: 1fr;
  }
  
  .date-selector {
    position: static;
    margin-top: 15px;
  }
  
  .profit-details {
    grid-template-columns: 1fr;
  }
  
  .heatmap-header,
  .heatmap-row {
    grid-template-columns: 50px repeat(7, 1fr);
  }
}
</style>